<template>
	<view style="padding: 10%;">

		<uni-section title="用户注册 " type="line">
			<view>
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view>

				<view v-if="current === 0">
					<uni-section title="用户名(非昵称)" sub-title="选择用户名登录后请尽快绑定手机号或者邮箱,否则无法找回密码!"><uni-easyinput v-model="zhuceInfo.username"
							placeholder="请输入用户名"></uni-easyinput>
					</uni-section>

					<uni-section title="密码"><uni-easyinput type="password" v-model="zhuceInfo.password"
							placeholder="请输入密码"></uni-easyinput>
					</uni-section>

					<view class="button-container">
						<button @click="zhuce" type="primary" size="mini" class="zhuce-button">注册</button>
						<button @click="reset" type="warn" size="mini" class="reset-button">重置</button>
					</view>

				</view>

				<view v-if="current === 1">
					<uni-section title="手机号"><uni-easyinput v-model="phoneInfo.phone"
							placeholder="请输入手机号"></uni-easyinput>
					</uni-section>

					<uni-section title="验证码">
						<view class="input-with-button">
							<uni-easyinput v-model="phoneInfo.code" placeholder="请输入验证码" />
							<button @click="sendVerificationCode" :disabled="isCountingDown" size="mini">
								{{ isCountingDown ? `${countdown}秒后重新发送` : '发送验证码' }}
							</button>
						</view>
					</uni-section>

					<uni-section title="密码"><uni-easyinput type="password" v-model="phoneInfo.password"
							placeholder="请输入密码"></uni-easyinput>
					</uni-section>

					<view class="button-container">
						<button @click="phonezhuce" type="primary" size="mini" class="zhuce-button">注册</button>
						<button @click="reset" type="warn" size="mini" class="reset-button">重置</button>
					</view>

				</view>

				<view v-if="current === 2">
					<uni-section title="邮箱"><uni-easyinput v-model="emailInfo.email"
							placeholder="请输入邮箱"></uni-easyinput>
					</uni-section>

					<uni-section title="验证码">
						<view class="input-with-button">
							<uni-easyinput v-model="emailInfo.code" placeholder="请输入验证码" />
							<button @click="sendVerificationCode1" :disabled="isCountingDown" size="mini">
								{{ isCountingDown ? `${countdown}秒后重新发送` : '发送验证码' }}
							</button>
						</view>
					</uni-section>

					<uni-section title="密码"><uni-easyinput type="password" v-model="emailInfo.password"
							placeholder="请输入密码"></uni-easyinput>
					</uni-section>

					<view class="button-container">
						<button @click="emailzhuce" type="primary" size="mini" class="zhuce-button">注册</button>
						<button @click="reset" type="warn" size="mini" class="reset-button">重置</button>
					</view>

				</view>

			</view>
		</uni-section>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue';
	import {
		api,
		tools
	} from '../../api/api.js';
	import userstore from '../../store/user.js';
	import {
		storeToRefs
	} from 'pinia';

	const items = ref(['用户名注册', '手机号注册', '邮箱注册']);
	const current = ref(0);
	const activeColor = ref('#007aff');
	const styleType = ref('button');

	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};

	const zhuceInfo = ref({
		username: '',
		password: ''
	});

	const emailInfo = ref({
		email: '',
		password: '',
		code: ''
	})


	const phoneInfo = ref({
		phone: '',
		password: '',
		code: ''
	})


	const reset = () => {
		zhuceInfo.value = {
			username: '',
			password: ''
		};
		phoneInfo.value = {
			phone: '',
			password: '',
			code: ''
		};
		emailInfo.value = {
			email: '',
			password: '',
			code: ''
		};
	};

	const zhuce = () => {
		api.post('/user', zhuceInfo.value, (data) => {
			const icon = data.success ? 'success' : 'fail';
			uni.showToast({
				title: data.message,
				icon: icon
			});
			update();
		});
	};

	const {
		update
	} = userstore();


	const isCountingDown = ref(false);
	const countdown = ref(60);

	const startCountdown = () => {
		isCountingDown.value = true;
		const timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(timer);
				isCountingDown.value = false;
				countdown.value = 60;
			}
		}, 1000);
	};

	const sendVerificationCode = () => {
		if (!isCountingDown.value) {
			api.post('/tools/sendPhoneCode', {
				phone: phoneInfo.value.phone
			}, (data) => {
				if (data.success) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					startCountdown();
				} else {
					uni.showToast({
						title: data.message,
						icon: 'none'
					});
				}
			});
		}
	};

	const sendVerificationCode1 = () => {
		if (!isCountingDown.value) {
			api.post('/tools/sendMailCode', {
				email: emailInfo.value.email
			}, (data) => {
				if (data.success) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					startCountdown();
				} else {
					uni.showToast({
						title: data.message,
						icon: 'none'
					});
				}
			});
		}
	};

	const phonezhuce = () => {
		api.post('/user/phone', phoneInfo.value, (data) => {
			if (data.success) {
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			}
		});
	};
	
	const emailzhuce = () => {
		api.post('/user/email', emailInfo.value, (data) => {
			if (data.success) {
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			}
		});
	};
</script>

<style>
	.input-with-button {
		display: flex;
		align-items: center;
	}

	.button-container {
		display: flex;
		justify-content: space-between;
	}

	.zhuce-button {
		width: 48%;
		background-color: #007bff;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 10%;
	}

	.reset-button {
		width: 48%;
		background-color: #dc3545;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 10%;
	}
</style>